<template>
  <div class="cluster recovery">
    <a-card style="width: 100%">
      <p slot="title" class="cardTitles">
        <span>站段数据分析</span>
      </p>
      <div class="formDiv">
        <a-form layout="inline">
          <a-form-item label="站段">
            <a-select v-model="section" style="width: 200px">
              <a-select-option v-for="section in sectionData" :key="section">
                {{ section }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
      <div style="margin-top: 20px">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" tab="站段总览">
            <div class="total-data">
              <a-row :gutter="40" class="panel-group">
                <a-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
                  <div class="card-panel">
                    <div class="card-panel-icon-wrapper icon-people">
                      <a-icon type="snippets" />
                    </div>
                    <div class="card-panel-description">
                      <div class="card-panel-text">考试总次数</div>
                      <count-to
                        :start-val="0"
                        :end-val="examTotalCount"
                        :duration="2600"
                        class="card-panel-num"
                      />
                    </div>
                  </div>
                </a-col>
                <a-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
                  <div class="card-panel">
                    <div class="card-panel-icon-wrapper icon-message">
                      <a-icon type="project" />
                    </div>
                    <div class="card-panel-description">
                      <div class="card-panel-text">参考人数</div>
                      <count-to
                        :start-val="0"
                        :end-val="examStuNumber"
                        :duration="3000"
                        class="card-panel-num"
                      />
                    </div>
                  </div>
                </a-col>
                <a-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
                  <div class="card-panel">
                    <div class="card-panel-icon-wrapper icon-message">
                      <a-icon type="project" />
                    </div>
                    <div class="card-panel-description">
                      <div class="card-panel-text">考试步骤数</div>
                      <count-to
                        :start-val="0"
                        :end-val="stepsCount"
                        :duration="3000"
                        class="card-panel-num"
                      />
                    </div>
                  </div>
                </a-col>
                <a-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
                  <div class="card-panel">
                    <div class="card-panel-icon-wrapper icon-shopping">
                      <a-icon type="file-done" />
                    </div>
                    <div class="card-panel-description">
                      <div class="card-panel-text">题目总数</div>
                      <count-to
                        :start-val="0"
                        :end-val="doExamQuestionCount"
                        :duration="3600"
                        class="card-panel-num"
                      />
                    </div>
                  </div>
                </a-col>
              </a-row>
            </div>
            <div class="echarts-content" style="margin-top: 20px">
              <div class="echart-item">
                <div class="echart-title">
                  <a-icon type="bar-chart" />
                  <span>站段练习信息总览</span>
                </div>
                <practiceInfo
                  v-if="infoShow"
                  id="echart1"
                  :examData="examInfoData"
                />
              </div>
              <div class="echart-item">
                <div class="echart-title">
                  <a-icon type="line-chart" />
                  <span>站段考试每月平均分</span>
                </div>
                <scoreNumber
                  v-if="isScoreMonth"
                  id="echart2"
                  :data="ScoreMonth"
                />
              </div>
              <a-row :gutter="20">
                <a-col :span="12">
                  <div class="echart-item">
                    <div class="echart-title">
                      <a-icon type="area-chart" />
                      <span>站段单次考试平均分</span>
                    </div>
                    <scoreExam
                      id="echart3"
                      :data="examScoreNumber"
                      v-if="isShow"
                    />
                  </div>
                </a-col>
                <a-col :span="12">
                  <div class="echart-item">
                    <div class="echart-title">
                      <a-icon type="control" />
                      <span>站段单次考试通过率</span>
                    </div>
                    <scoreExam
                      id="echart4"
                      :data="passRate"
                      v-if="isShowRate"
                      type="%"
                    />
                  </div>
                </a-col>
              </a-row>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="车间分析" force-render>
            <div class="echarts-content" style="margin-top: 20px">
              <a-row :gutter="20">
                <a-col :span="12">
                  <div class="echart-item">
                    <div class="echart-title">
                      <a-icon type="line-chart" />
                      <span>车间平均分排行(按照时间范围)</span>
                      <div
                        class="select-date"
                        style="width: 260px; float: right; margin-right: 10px"
                      >
                        <a-range-picker
                          v-model="selectDate"
                          @change="selectDateOnChange"
                        />
                      </div>
                    </div>
                    <selectRank :data="topData" v-if="isScoreShow" />
                  </div>
                </a-col>
                <a-col :span="12">
                  <div class="echart-item">
                    <div class="echart-title">
                      <a-icon type="line-chart" />
                      <span>车间平均分排行(按照考试)</span>
                      <div
                        class="select-date"
                        style="float: right; margin-right: 10px"
                      >
                        <a-select
                          v-model="examId"
                          style="width: 260px"
                          @change="selectExamChange"
                        >
                          <a-select-option
                            v-for="item in examData"
                            :value="item.id"
                            :key="item.id"
                            >{{ item.name }}</a-select-option
                          >
                        </a-select>
                      </div>
                    </div>
                    <selectRank :data="examTopData" v-if="isShowExamTOP" />
                  </div>
                </a-col>
              </a-row>
              <a-row :gutter="20">
                <a-col :span="12">
                  <div class="echart-item">
                    <div class="echart-title">
                      <a-icon type="line-chart" />
                      <span>车间练习时间排行(按照时间范围)</span>
                      <div
                        class="select-date"
                        style="width: 260px; float: right; margin-right: 10px"
                      >
                        <a-range-picker
                          v-model="selectDateTimeRank"
                          @change="timeRankOnChange"
                        />
                      </div>
                    </div>
                    <selectRank
                      rankType="time"
                      :data="timeRankData"
                      v-if="isTimeRankShow"
                    />
                  </div>
                </a-col>
                <a-col :span="12">
                  <div class="echart-item">
                    <div class="echart-title">
                      <a-icon type="line-chart" />
                      <span>车间人均次数排行(按照考试)</span>
                      <div
                        class="select-date"
                        style="float: right; margin-right: 10px;width: 260px;"
                      >
                        <a-range-picker
                          v-model="selectCountDate"
                          @change="countOnChange"
                        />
                      </div>
                    </div>
                    <selectRank
                      rankType="count"
                      :data="countData"
                      v-if="isCountShow"
                    />
                  </div>
                </a-col>
              </a-row>
              <a-row :gutter="20">
                <a-col :span="12">
                  <div class="echart-item">
                    <div class="echart-title">
                      <a-icon type="line-chart" />
                      <span>车间一次性通过率排行(按照考试)</span>
                      <div
                        class="select-date"
                        style="float: right; margin-right: 10px"
                      >
                        <a-select
                          v-model="shopExamId"
                          style="width: 260px"
                          @change="selectShopExamChange"
                        >
                          <a-select-option
                            v-for="item in examData"
                            :value="item.id"
                            :key="item.id"
                            >{{ item.name }}</a-select-option
                          >
                        </a-select>
                      </div>
                    </div>
                   <examRank :rankList="shopExamPassRate" />
                  </div>
                </a-col>
                <a-col :span="12">
                  <div class="echart-item">
                    <div class="echart-title">
                      <a-icon type="line-chart" />
                      <span>段下考项时间范围内正确率排行</span>
                      <div
                        class="select-date"
                        style="float: right; margin-right: 10px;width: 260px;"
                      >
                      <a-range-picker
                          v-model="selectQuestionDate"
                          @change="questionOnChange"
                        />
                      </div>
                    </div>
                    <selectRank
                      rankType="percent"
                      :data="questionRateData"
                      v-if="isQuestionShow"
                    />
                  </div>
                </a-col>
              </a-row>
            </div>
          </a-tab-pane>
          <a-tab-pane key="4" tab="考试总览">
             <div class="echarts-content" style="margin-top: 20px">
               <specificItem :section="section" />
             </div>
          </a-tab-pane>
          <a-tab-pane key="3" tab="考试步骤分析">
            <div class="echarts-content" style="margin-top: 20px">
               <stepAnalysis :section="section" />
             </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
  </div>
</template>

<script>
import practiceInfo from "components/configuration/home/baseEcharts/practiceInfo";
import scoreNumber from "components/configuration/home/baseEcharts/scoreNumber";
import scoreExam from "components/configuration/home/baseEcharts/scoreExam";
import sectorBar from "components/configuration/home/baseEcharts/sectorBar";
import selectRank from "components/configuration/home/baseEcharts/selectRanking";
import examRank from "components/configuration/home/baseEcharts/examRank";
import specificItem from "components/configuration/home/moduleAnalysis/specificItem";
import stepAnalysis from "components/configuration/home/moduleAnalysis/stepAnalysis";
import {
  getTotalExamTimes,
  getTotalExamCount,
  getTotalExamSteps,
  getTotalExamInfo,
  getScoreMonth,
  getScoreExam,
  getPassRate,
  getShopDataScore,
  getShopExamScore,
  shopExamTimeRank,
  shopExamCountRank,
  shopsExamOnceRank,
  sectionRightRank,
  sectionQuestionRank
} from "@/api/dataAnalysis";
import { getExamTasksList } from "@/api/examination";
import CountTo from "vue-count-to";
import { getSectionArr } from "@/assets/js/utils";
import question from "@/assets/json/questionList.js";
import moment from 'moment';
export default {
  components: {
    CountTo,
    practiceInfo,
    scoreNumber,
    scoreExam,
    sectorBar,
    selectRank,
    examRank,
    specificItem,
    stepAnalysis
  },
  data() {
    return {
      shopExamId:'',//段下车间某次考试一次性通过率考试id
      rankList: [
        {
          wordName: "测试",
          percent: 80,
          id: 1,
        },
        {
          wordName: "测试",
          percent: 80,
          id: 2,
        },
      ],
      isQuestionShow:false,
      isTimeRankShow: false,
      isShowExamTOP: false,
      isScoreShow: false,
      isShow: false,
      isShowRate: false,
      infoShow: false,
      isScoreMonth: false,
      section: "天津机务段",
      sectionData: getSectionArr(),
      examStuNumber: 100,
      stepsCount: 200,
      doExamQuestionCount: 76,
      examTotalCount: 40,
      loading: false,
      selectDate: [moment(new Date()).subtract(1,'months').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')], //车间平均分排行榜选择
      examId: null, //选择考试的id
      examData: [], //考试下拉列表
      examInfoData: {
        numberData: [],
        timeData: [],
        dateData: [],
      },
      ScoreMonth: {
        scoreData: [],
        dateData: [],
        examNumber: [],
      },
      examScoreNumber: {
        questionArr: [],
        scoreArr: [],
      },
      passRate: {
        questionArr: [],
        scoreArr: [],
      },
      sectorData: {
        name: [],
        value: [],
      },
      topData: [],
      examTopData: [],
      //训练时间排行
      timeRankData: [],
      selectDateTimeRank: [moment(new Date()).subtract(1,'months').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')],
      selectCountDate: [moment(new Date()).subtract(1,'months').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')],
      countData: [],
      isCountShow: false,
      shopExamPassRate:[],//考试一次通过率
      selectQuestionDate:[moment(new Date()).subtract(1,'months').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')],//题目正确率
      questionRateData:[]
    };
  },
  mounted() {
    this.getTotalExamTimesData();
    this.getTotalExamCountData();
    this.getTotalExamStepsData();
    this.getTotalExamInfoData();
    this.getScoreMonthData();
    this.getScoreExamData();
    this.getPassRateData();
    this.getShopDataScoreData();
    this.getExamTasksData();
    this.getShopExamScoreData();
    this.shopExamTimeRankData(); //某一段时间范围车间训练时间排行
    this.shopExamCountRankData(); //次数排行
    this.getShopExamRate();
    this.sectionRightRankData();
  },
  methods: {
    questionOnChange(date, dateString){
      this.selectQuestionDate = dateString;
      this.sectionRightRankData();
    },
    sectionRightRankData(){
      this.isQuestionShow = false;
      sectionQuestionRank({
        section: this.section,
        startTime: this.selectQuestionDate[0],
        endTime: this.selectQuestionDate[1],
      })
        .then((res) => {
          if (res.data.histogram) {
            var questionList = question()
            var arrList =[]
            res.data.histogram.forEach((item) => {
              var obj ={};
              questionList.forEach((item2)=>{
                if(item.Key == item2.id){
                  obj.Key = item2.question
                  obj.Data1 = Math.floor(item.Data1*100)
                }
              })
              arrList.push(obj)
            });
            this.questionRateData = arrList

          } else {
            this.questionRateData = [];
          }
          this.isQuestionShow = true;
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    selectShopExamChange(value){//段下车间某次考试一次性通过率考试
      this.shopExamId = value;
      this.getShopExamRate();
    },
    getShopExamRate(){
      shopsExamOnceRank({
        section: this.section,
        examId:this.shopExamId?this.shopExamId:null
      })
        .then((res) => {
          if (res.data.histogram) {
            var arrRate =[]
            res.data.histogram.forEach((item)=>{
              arrRate.push({
                wordName:item.Key,
                percent:Math.floor(item.Data1*100)
              })
            })
            this.shopExamPassRate = arrRate
          } else {
            this.shopExamPassRate = [];
          }
          this.isCountShow = true;
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    countOnChange(date, dateString) {
      this.selectCountDate = dateString;
      this.shopExamCountRankData();
    },
    shopExamCountRankData() {
      this.isCountShow = false;
      shopExamCountRank({
        section: this.section,
        startTime: this.selectCountDate[0],
        endTime: this.selectCountDate[1],
      })
        .then((res) => {
          if (res.data.histogram) {
            this.countData = res.data.histogram;
          } else {
            this.countData = [];
          }
          this.isCountShow = true;
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    //某一段时间范围车间训练时间排行
    shopExamTimeRankData() {
      this.isTimeRankShow = false;
      shopExamTimeRank({
        section: this.section,
        startTime: this.selectDateTimeRank[0],
        endTime: this.selectDateTimeRank[1],
      })
        .then((res) => {
          if (res.data.histogram) {
            var arr = [];
            var arr2 = [];
            this.timeRankData = res.data.histogram;
          } else {
            this.timeRankData = [];
          }
          this.isTimeRankShow = true;
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    timeRankOnChange(date, dateString) {
      this.selectDateTimeRank = dateString;
      this.shopExamTimeRankData();
    },
    //切换考试
    selectExamChange(value) {
      this.examId = value;
      this.getShopExamScoreData();
    },
    getShopExamScoreData() {
      //时间范围内段下车间平均分排行
      this.isShowExamTOP = false;
      getShopExamScore({
        section: this.section,
        examId: this.examId,
      })
        .then((res) => {
          if (res.data.histogram) {
            var arr = [];
            var arr2 = [];
            this.examTopData = res.data.histogram;
            // res.data.histogram.forEach((item) => {
            //   arr.push(item.Key);
            //   arr2.push(Math.floor(item.Data1));
            // });
            // this.sectorData.name = arr;
            // this.sectorData.value = arr2;
          } else {
            this.examTopData = [];
          }
          this.isShowExamTOP = true;
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    //获取考试列表
    getExamTasksData() {
      var params = {
        page: 1,
        limit: 99999999,
        section: this.section,
        name: "",
      };
      getExamTasksList(params)
        .then((res) => {
          if(res.data.examSimpleInfo.length>0){
            this.examData = res.data.examSimpleInfo;
            this.examId = res.data.examSimpleInfo[0].id;
            this.shopExamId = res.data.examSimpleInfo[0].id;
            this.getShopExamScoreData();
            this.getShopExamRate()
          }
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    selectDateOnChange(date, dateString) {
      this.selectDate = dateString;
      this.getShopDataScoreData();
    },
    getShopDataScoreData() {
      //时间范围内段下车间平均分排行
      this.isScoreShow = false;
      getShopDataScore({
        section: this.section,
        startTime: this.selectDate[0],
        endTime: this.selectDate[1],
      })
        .then((res) => {
          if (res.data.histogram) {
            var arr = [];
            var arr2 = [];
            this.topData = res.data.histogram;
            res.data.histogram.forEach((item) => {
              arr.push(item.Key);
              arr2.push(Math.floor(item.Data1));
            });
            this.sectorData.name = arr;
            this.sectorData.value = arr2;
          } else {
            this.topData = [];
          }
          this.isScoreShow = true;
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    getScoreExamData() {
      this.isShow = false;
      getScoreExam({
        section: this.section,
      })
        .then((res) => {
          if (res.data.histogram.length > 0) {
            var arr = [];
            var arr2 = [];
            res.data.histogram.forEach((item) => {
              arr.push(item.Key);
              arr2.push(Math.floor(item.Data1));
            });
            this.examScoreNumber.questionArr = arr;
            this.examScoreNumber.scoreArr = arr2;
            console.log(this.examScoreNumber);
            this.isShow = true;
          }
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    getPassRateData() {
      this.isShowRate = false;
      getPassRate({
        section: this.section,
      })
        .then((res) => {
          if (res.data.histogram.length > 0) {
            var arr = [];
            var arr2 = [];
            res.data.histogram.forEach((item) => {
              arr.push(item.Key);
              arr2.push(Math.floor(item.Data1 * 100));
            });
            this.passRate.questionArr = arr;
            this.passRate.scoreArr = arr2;
            this.isShowRate = true;
          }
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    //获取数据
    getTotalExamTimesData() {
      getTotalExamTimes({
        section: this.section,
      })
        .then((res) => {
          this.examStuNumber = res.data.count;
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    getTotalExamCountData() {
      getTotalExamCount({
        section: this.section,
      })
        .then((res) => {
          this.examTotalCount = res.data.count;
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    getTotalExamStepsData() {
      getTotalExamSteps({
        section: this.section,
      })
        .then((res) => {
          this.stepsCount = res.data.count;
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    getTotalExamInfoData() {
      this.infoShow = false;
      getTotalExamInfo({
        section: this.section,
      })
        .then((res) => {
          if (res.data.monthDatas.length > 0) {
            var arr = [];
            var arr2 = [];
            var arrDate = [];
            res.data.monthDatas.forEach((item) => {
              arr.push(item.Data1);
              arr2.push(Math.floor(item.Data2 / 3600));
              arrDate.push(item.Key);
            });
            this.examInfoData.numberData = arr;
            this.examInfoData.timeData = arr2;
            this.examInfoData.dateData = arrDate;
            this.infoShow = true;
          }
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    getScoreMonthData() {
      this.isScoreMonth = false;
      getScoreMonth({
        section: this.section,
      })
        .then((res) => {
          if (res.data.histogram.length > 0) {
            var arr = [];
            var arrDate = [];
            var arrNumber = [];
            res.data.histogram.forEach((item) => {
              arr.push(Math.floor(item.Data1));
              arrDate.push(item.Key);
              arrNumber.push(item.Data2);
            });
            this.ScoreMonth.scoreData = arr;
            this.ScoreMonth.dateData = arrDate;
            this.ScoreMonth.examNumber = arrNumber;
            this.isScoreMonth = true;
          }
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
  },
};
</script>

<style lang="stylus" scoped>
.recovery {
  height: 100%;
}

.panel-group {
  .card-panel-col {
    margin-bottom: 20px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 0px 2px 54px 0px rgba(189, 198, 255, 0.5);
    border-color: rgba(0, 0, 0, 0.05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3;
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3;
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 17px 0 0 14px;
      padding: 16px 25px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
      font-size: 30px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}

.echarts-content {
  .echart-title {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333;
    overflow hidden;
    width:100%;

    span {
      margin-left: 10px;
    }
  }
}

.echart-item {
  height: 450px;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
  box-sizing: border-box;
}
/deep/ .ant-tabs {
  overflow:inherit;
}
</style>
